<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { ref, computed, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import PasswordInput from './components/passwordinput.vue'
import { rechargeplanAPI, accountSaveAPI } from '@/services/valuecenter'
import type { IAccountParams, IZyRechargePlanDTO } from '@/types/valuecenter'
const systemInfo = uni.getSystemInfoSync()
const { safeAreaInsets, statusBarHeight, screenWidth } = systemInfo
const { getUserInfo } = useMemberStore()
const accountList = ref([] as IZyRechargePlanDTO[])

const activeIndexAccount = ref(0 as number)

const scrollHandler = (e: any) => {
  console.log(e)
}

// 响应式数据
const password: any = ref('')
const passwordError = ref(false)
const rechargePlanId = ref(null as any)
const availableBalance = ref(null as any)

const goRecord = () => {
  uni.navigateTo({
    url: '/pagesMember/valuecenter/record',
  })
}

const acountTapHandler = (item: IZyRechargePlanDTO, index: number) => {
  activeIndexAccount.value = index
  rechargePlanId.value = item.id
}
const checked = ref(0)
const checkedHandler = (check: number) => {
  checked.value = check === 0 ? 1 : 0
}

const submitHandler = async () => {
  if (!rechargePlanId.value) {
    uni.showToast({
      title: '请选择套餐',
      icon: 'none',
    })
    return
  }
  if (isSet.value === 0) {
    if (!password.value || passwordError.value) {
      uni.showToast({
        title: '请确认密码',
        icon: 'none',
      })
      return
    }
  }

  if (checked.value === 0) {
    uni.showToast({
      title: '是否同意储值服务协议',
      icon: 'none',
    })
    return
  }
  // 充值
  await accountSaveAPI({
    userId: getUserInfo()?.id,
    password: isSet.value === 0 ? password.value : null,
    rechargePlanId: rechargePlanId.value,
  })
}
const isSet = ref(1)
const rechargeplanAPIRequest = async () => {
  const res = await rechargeplanAPI({ userId: getUserInfo()?.id })
  accountList.value = res.data.rechargePlanList
  isSet.value = res.data.isSet
  availableBalance.value = res.data.availableBalance
  rechargePlanId.value = accountList.value[0]?.id
}

onLoad(() => {
  rechargeplanAPIRequest()
})

const refreshDataList = (value: any) => {
  password.value = value.password
  passwordError.value = value.passwordError
}

//返回上一页
const onreturn = () => {
  uni.navigateBack()
}
const title = ref('储值中心')
</script>

<template>
  <view
    class="value-center"
    :style="{
      paddingBottom: safeAreaInsets?.bottom + 'px',
    }"
  >
    <scroll-view scroll-y>
      <view class="balance-amount">
        <image class="bg" src="@/static/images/order_bg.png" mode="aspectFill"></image>
        <view class="info">
          <view class="left">
            <view class="price">{{ availableBalance || 0 }}</view>
            <view class="text">账户余额(￥)</view>
          </view>
          <view class="right" @tap="goRecord()">
            <text class="txt">储值记录</text>
            <!-- <text class="iconfont icon-jinru"></text> -->
          </view>
        </view>
      </view>
      <view class="alert-box" v-if="isSet === 0">
        <text class="iconfont icon-RectangleCopy19"></text>
        <text>首次储值需设置支付密码，保障资金安全</text>
      </view>
      <view class="value-box">
        <view class="title">
          <text class="text">储值套餐</text>
          <!-- <view class="btn" @tap="goRecord()">
            <text class="txt">储值记录</text>
            <text class="iconfont icon-jinru"></text>
          </view> -->
        </view>
      </view>

      <scroll-view class="scroll-view-h" :scroll-x="true" scroll-left="0">
        <view class="scroll-view-item-h" :key="index" v-for="(item, index) in accountList">
          <view
            class="inner"
            :class="{ active: index === activeIndexAccount }"
            @click="acountTapHandler(item, index)"
          >
            <view class="price">充{{ item.amount }}元</view
            ><view class="text">送{{ item.bonus }}元</view>
          </view>
        </view>
      </scroll-view>

      <password-input v-if="isSet === 0" @refreshDataList="refreshDataList" />

      <view class="agreement_wrap">
        <view class="title">储值协议</view>
        <view class="con"
          ><text class="txt">• 储值卡为不记名电子卡，不可挂失 </text>
          <text class="txt">• 储值金额有效期为自充值日起1年</text>
          <text class="txt">• 储值金额不可提现，可按规定申请退款 </text>
          <text class="txt">• 本店保留最终解释权</text>
        </view>

        <view class="btn"> 查看完整协议 </view>
      </view>

      <view class="btn-submit" @click="submitHandler">{{
        isSet === 0 ? '确认储值并设置密码' : '确认储值'
      }}</view>
      <view class="btn-tip-wrap">
        <text class="btn-tip" @click="checkedHandler(checked)"
          ><text class="iconfont icon-gouxuan" v-if="checked === 1"></text
          ><text v-else class="iconfont icon-gouxuan3"></text
          ><text>点击即表示同意《储值服务协议》</text></text
        >
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';

.balance-amount {
  position: relative;
  width: 100%;
  // border-radius: 12px;
  overflow: hidden;

  height: 250rpx;
  display: flex;
  flex-direction: column;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    z-index: -1;
    opacity: 0.9; // 可根据需要调整背景图透明度
  }

  .info {
    margin-top: auto;
    margin-left: 30rpx;
    margin-right: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 12rpx;
    background-color: #fff;
    padding: 32rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 10rpx;
    .left {
      font-size: $font-size;
      color: #000000;
      display: flex;
      flex-direction: column;
      flex: 1;
      .price {
        font-size: $font-largex-size;
        font-weight: $font-bold-weight;
        color: #000;
      }
      .text {
        font-size: $font-mini-size;
        color: #767676;
      }
    }

    .right {
      display: flex;
      align-items: center;
      color: #767676;
      font-size: $font-mini-size;
      height: 50rpx;
      border-radius: 25rpx;
      text-align: center;
      line-height: 50rpx;
      border: 1px solid #767676;
      padding: 0 30rpx;
      margin-top: auto;
    }
  }
}

page {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.value-center {
  display: flex;
  flex-direction: column;
  height: 100%;

  .alert-box {
    color: #ff9500;
    border-radius: 12rpx;
    background-color: #fff8e7;
    padding: 20rpx;
    margin: 16rpx 32rpx;
    font-size: $font-size;
    display: flex;
    flex-direction: row;
    align-items: center;
    .iconfont {
      color: #ff9500;
      margin-right: 10rpx;
    }
  }

  .value-box {
    padding: 32rpx;
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;

      .text {
        font-size: 28rpx;
        color: #000000;
        font-weight: $font-medium-weight;
        // font-weight: bold;
      }

      .btn {
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 24rpx;

        .txt {
        }
      }
    }
  }

  .scroll-view-h {
    height: 304rpx;
    white-space: nowrap;
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    .scroll-view-item-h {
      display: inline-block;
      margin-right: 24rpx;
      .inner {
        border-radius: 20rpx;
        border: 1rpx solid #1677ff;
        width: 180rpx;
        height: 240rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .price {
          color: #000000;
          font-size: 32rpx;
          margin-bottom: 30rpx;
        }
        .text {
          font-size: 28rpx;
          color: #ff9500;
        }

        &.active {
          background: #1677ff;
          .price,
          .text {
            color: #fff;
          }
        }
      }
    }
  }

  .container {
    padding: 20px;
  }

  .header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .password-section {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
  }

  .password-title {
    text-align: center;
    margin-bottom: 10px;
  }

  .password-input {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .password-dots {
    display: flex;
    justify-content: space-between;
    width: 180px; /* 控制点阵总宽度 */
    margin-top: 10px;
  }

  .dot {
    width: 30px;
    height: 30px;
    border: 1px dashed #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dot.filled::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
  }

  .error-message {
    color: red;
    text-align: center;
    margin-bottom: 10px;
  }

  .info-message {
    color: gray;
    text-align: center;
  }

  .agreement_wrap {
    padding: 10rpx 32rpx;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    .title {
      font-size: $font-size;
      color: #000000;
      line-height: 50rpx;
      font-weight: $font-medium-weight;
      margin-bottom: 20rpx;
    }
    .con {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      color: #666666;
      font-weight: 400;
      .txt {
        margin-bottom: 10rpx;
      }
    }

    .btn {
      margin: 20rpx 0;
      font-size: 24rpx;
      font-weight: $font-weight;
      color: #1677ff;
    }
  }

  .btn-submit {
    font-size: 28rpx;
    color: #fff;
    background: linear-gradient(to right, #1677ff 100%, #0e5fff 100%);
    margin: 30rpx 32rpx;
    height: 100rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 100rpx;
  }
  .btn-tip-wrap {
    display: flex;
    justify-content: center;
    padding: 10rpx 0 30rpx 0;

    .btn-tip {
      color: #999999;
      font-size: 24rpx;
      display: flex;
      color: #1677ff;
      align-items: center;
      justify-content: center;
      .iconfont {
        color: #1677ff;
        font-size: 30rpx;
        margin-right: 4rpx;
      }
    }
  }
}
</style>
